<template>
  <div class="detail_base">
    <div class="detail_base_collect" @click="handleCollect(!isCollect)">
      <svg class="base_icon" aria-hidden="true">
        <use
          :xlink:href="!isCollect ? '#icon-shoucang-copy' : '#icon-shoucang1'"
        ></use>
      </svg>
      <span>{{ !isCollect ? "收藏" : "取消收藏" }}</span>
    </div>
    <div class="detail_base_follow" @click="handleFollow">
      <svg class="base_icon" aria-hidden="true">
        <use
          :xlink:href="isFollow ? '#icon-chakantieziguanzhu' : '#icon-guanzhu'"
        ></use>
      </svg>
      <span>{{ isFollow ? "关注" : "取消关注" }}</span>
    </div>
    <div class="detail_base_adopt" @click="handleAdopt">
      {{ isAdopt ? "已申请" : "申请领养" }}
    </div>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
import { Dialog, Toast } from "vant";
import { getCollection, getCollectstate, postAdopt } from "@/api/home";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

export default {
  name: "PetDetailsBase",
  props: ["petdetailsList"],
  setup(props, { emit }) {
    const store = useStore();
    //收藏区
    const { GetCollectstate, isCollect } = handleCollectstate();
    GetCollectstate();
    //修改收藏状态
    const handleCollect = (value) => {
      const parms = {
        user_id: store.state.user.profile.user_id,
        cover_collection_userId: props.petdetailsList.user_id,
        pet_id: props.petdetailsList.pet_id,
        collection_status: value.toString(),
      };
      // console.log(parms);
      //发送收藏状态修改请求
      getCollection(parms).then((res) => {
        // console.log(res);
        if (res.status == 200) {
          //重新获取收藏状态
          GetCollectstate();
        }
      });
    };
    //关注区
    const isFollow = ref(true);
    const handleFollow = () => {
      isFollow.value = !isFollow.value;
    };
    //申请领养
    const { isAdopt, PostAdopt } = handlePostAdopt(props, emit);
    watchEffect(() => {
      if (props.petdetailsList?.pet_give_status == "true") {
        isAdopt.value = true;
      } else {
        isAdopt.value = false;
      }
    });
    const handleAdopt = () => {
      //根据领养状态以此判断是否请求领养
      if (!isAdopt.value) {
        Dialog.confirm({
          title: "领养提示",
          message: "你确定想要申请领养这个宠物吗？",
        }).then(() => {
          //请求领养
          PostAdopt();
        });
      } else {
        Toast("已被领养");
      }
    };
    return {
      isCollect,
      isFollow,
      isAdopt,
      handleFollow,
      handleCollect,
      handleAdopt,
    };
  },
};
//获取收藏状态
function handleCollectstate() {
  const store = useStore();
  const route = useRoute();
  const isCollect = ref(null);
  const GetCollectstate = () => {
    getCollectstate(
      store.state.user.profile.user_id,
      route.path.split("/")[2]
    ).then((res) => {
      // console.log(res);
      //修改收藏状态
      isCollect.value = res.collection_status == "true" ? true : false;
    });
  };
  return { GetCollectstate, isCollect };
}

//申请领养
function handlePostAdopt(props, emit) {
  const store = useStore();
  // const route = useRoute();
  //领养状态
  const isAdopt = ref(false);
  const PostAdopt = () => {
    const obj = {
      adopter_id: store.state.user.profile.user_id,
      pet_id: props.petdetailsList.pet_id,
    };
    postAdopt(obj).then((res) => {
      // console.log(res);
      if (res.status == 200) {
        //修改领取状态
        // isAdopt.value=true
        emit("handleGetList");
        Toast("申请成功");
      }
    });
  };
  return { isAdopt, PostAdopt };
}
</script>

<style scoped lang="less">
.detail_base {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.7rem;
  background-color: #fff;
  border-top: 1px solid #c8c9cc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 9;
  .detail_base_collect,
  .detail_base_follow {
    display: flex;
    flex-direction: column;
    //justify-content: space-around;
    align-items: center;
    span {
      font-size: 0.1rem;
      color: #646566;
    }
  }
  .detail_base_adopt {
    padding: 0.3rem 2rem;
    border-radius: 1rem;
    color: #ececec;
    font-size: 1rem;
    background-image: linear-gradient(to right, #ffd01eba, #ee0a2487);
  }
}
.base_icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  overflow: hidden;
}
</style>
